// React基础组件
import React from 'react'
// dva 连接组件 - 连接route和model
import { connect } from 'dva'
// 引入antd的组件
import { Form,Modal,Row,Col,Button,Icon,message,Table,Divider} from 'antd'
//导入路由组件，用于跳转等
// import { Link, hashHistory } from 'dva/router'
// 导入项目全局配置文件
import config from 'config/config'
// 引入model取值工具方法
import { mapStateToProps } from 'utils/view_utils'
// 当前组件样式
import styles from './talkIndicatorsStyle.less'
//引用listPage
import $ from 'jquery'
import cx from 'classnames'
import { AdvanceSearch } from 'widget/CollapsiblePanels/index'
import { QueryCondition } from 'widget/Grid/index'
const { Column, ColumnGroup } = Table;


/**
 * description 路由视图及事件处理
 * dispatch 分发到models中的effects对应事件名
 * model 用于获取models中state定义的数据
 * form 表单对象
 */
const RouteView = function ({ dispatch, model, form }) {
  // 表单的子函数
  const { resetFields, getFieldDecorator, validateFields, setFieldsValue } = form
  // 取出model对象，命名空间
  const { modelObj, namespace } = model

  const { detailData,projectId,biz,loading,queryList,dataList}  = modelObj
  
   // 分页
  const pagination = {
    current: Number(detailData.pageNo || 1),
    pageNo: Number(detailData.pageNo || 1),
    pageSize: Number(detailData.pageSize || 10),
    total: Number(detailData.total),
    showTotal: e => '共 ' + detailData.total + ' 条',
    showSizeChanger: true,
    showQuickJumper: true,
    onChange: changePage, //分页事件
    onShowSizeChange: changePage, //每页条数
}

  //翻页函数 
  function changePage(page, pageSize) {
    detailData.pageNo = page
    detailData.pageSize = pageSize
    dispatch({
        type: `${namespace}/updateStore`,
        payload: { detailData }
    })
    dispatch({
        type: `${namespace}/search`,
        payload: { }
    });

  }
  //查询
  const onSearch = () => {
    dispatch({
      type: `${namespace}/search`,
      payload: {}
    })
  }
  // 导出数据
  function download(){
    dispatch({
      type: `${namespace}/exportList`,
      payload: {}
    })
  }

  return (
    <div className='public_listMain' style={{background: ''}}> 
      <div className={"functionButton"}>
        <Button type='primary' onClick={e => download()}>导出</Button>
      </div>
       <AdvanceSearch
          footer={
            <span>
                <Button type="primary" htmlType="submit" onClick={() => onSearch()} loading={loading}>搜索</Button>
                <Button onClick={() => dispatch({ type: `${namespace}/queryReset` })}>重置</Button>
              </span>
          }
        >
          <QueryCondition
            data={queryList}
            inputChange={(key, value) => dispatch({type: `${namespace}/inputChange`, payload: {key, value}})}
          />
        </AdvanceSearch>

      <div style={{width: '100%'}} className='zhibiao'>
        <Table dataSource={dataList} pagination={pagination} scroll={{ x: 3200 }}>
          <Column title="编号" dataIndex="ruleNo" key="ruleNo" />
          <Column title="区域" dataIndex="areaName" key="areaName" />
          <Column title="项目" dataIndex="projectName" key="projectName" />
          <Column title="团队" dataIndex="teamName" key="teamName" />
          <Column title="姓名" dataIndex="userName" key="userName" />
          <Column title="小蜜蜂人数" dataIndex="beeCount" key="beeCount" />
          <ColumnGroup title="报备">
            <Column title="报备指标" dataIndex="userReportTargetNum" key="userReportTargetNum" />
            <Column title="专员报备组数" dataIndex="userReportNum" key="userReportNum" />
            <Column title="专员报备占比" dataIndex="userReportRateFormat" key="userReportRateFormat" />
            <Column title="小蜜蜂报备组数" dataIndex="beeReportNum" key="beeReportNum" />
            <Column title="小蜜蜂报备占比" dataIndex="beeReportRateFormat" key="beeReportRateFormat" />
            <Column title="报备完成率" dataIndex="reportRateFormat" key="reportRateFormat" />
          </ColumnGroup>
          <ColumnGroup title="到访">
            <Column title="到访指标" dataIndex="userVisitTargetNum" key="userVisitTargetNum" />
            <Column title="到访组数" dataIndex="userVisitNum" key="userVisitNum" />
            <Column title="到访完成率" dataIndex="visitRateFormat" key="visitRateFormat" />
          </ColumnGroup>
          <ColumnGroup title="认筹">
            <Column title="认筹指标" dataIndex="userRaiseTargetNum" key="userRaiseTargetNum" />
            <Column title="认筹组数" dataIndex="userRaiseNum" key="userRaiseNum" />
            <Column title="认筹完成率" dataIndex="raiseRateFormat" key="raiseRateFormat" />
          </ColumnGroup>
          <ColumnGroup title="认购">
            <Column title="认购指标" dataIndex="userSubTargetNum" key="userSubTargetNum" />
            <Column title="认购套数" dataIndex="userSubNum" key="userSubNum" />
            <Column title="认购完成率" dataIndex="subRateFormat" key="subRateFormat" />
          </ColumnGroup>
          <ColumnGroup title="签约">
            <Column title="签约指标" dataIndex="userSignTargetNum" key="userSignTargetNum" />
            <Column title="签约套数" dataIndex="userSignNum" key="userSignNum" />
            <Column title="签约完成率" dataIndex="signRateFormat" key="signRateFormat" />
          </ColumnGroup>
          <ColumnGroup title="签约金额（万）">
            <Column title="签约金额指标" dataIndex="performanceNumTarget" key="performanceNumTarget" />
            <Column title="签约金额" dataIndex="signSum" key="signSum" />
            <Column title="签约金额完成率" dataIndex="signTargetRateFormat" key="signTargetRateFormat" />
          </ColumnGroup>
        </Table>
      </div>
    </div>
    
  )
}

// 连接视图(view)和模型(model)
export default connect(mapStateToProps)(Form.create()(RouteView))
